import request from "../../utils/request"

// pages/video/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navList: [],
    navCurrentId: 0,
    videoList: [],
    videoCurrentId: 0,
    videoPlayHistoryList: [],
    //下拉刷新的开关
    refresherFlag: true
  },
  //通过video的bindtimeupdate获取视频的信息
  getVideoTime(event) {
    // 获取当前视频的id与播放事件
    const currentTime = event.detail.currentTime
    const id = event.target.id
    //将当前视频的id与时间戳收集保存
    let currentTimeData = {
      id,
      currentTime
    }
    //因为视频有可能会有多个，所以我们需要判断当前的视频是新增还是修改
    const videoPlayHistoryList = this.data.videoPlayHistoryList
    const videoData = videoPlayHistoryList.find(item => item.id === id)
    if (videoData) {
      videoData.currentTime = currentTimeData.currentTime
    } else {
      videoPlayHistoryList.push(currentTimeData)
    }
    //将数据添加到视频历史记录列表
    this.setData({
      videoPlayHistoryList
    })
  },

  //获取视频导航的列表
  async getNavList() {
    const result = await request("/video/group/list", {}, "GET")
    this.setData({
      navList: result.data.slice(0, 30)
    })
    this.setData({
      navCurrentId: result.data.slice(0, 30)[0].id
    })
  },
  //切换nav的id的事件函数
  changeNavHandle(event) {
    const navCurrentId = event.currentTarget.dataset.id
    this.setData({
      navCurrentId
    })
    this.getVideoList()
  },
  //获取视频列表的请求,视频的请求需要携带cookie，所以需要重写request
  async getVideoList() {
    const result = await request("/video/group", {
      id: this.data.navCurrentId
    }, "GET")
    if (result.code === 200) {
      //将需要展示的数据收集起来
      const videoList = result.datas.map(item => {
        return item.data
      })
      this.setData({
        videoList
      })
    }
  },
  //视频点击的优化，点击其中一个暂停其他
  clickVideo(event) {
    // 将拿到当前视频的id
    const id = event.target.id
    // 非首次进来执行以下逻辑,判断全局是否有video实例
    if (this.player) {
      // 判断点击的是否是同一个视频，如果是则什么也不做
      if (id !== this.videoCurrentId) {
        // 暂停之前的视频实例
        this.player.pause()
        this.player = wx.createVideoContext(id)
        //判断是否有历史记录，如果有就跳转到之前的事件节点
        this.seekHistoryRecord(id)
        this.player.play()
        //将新的id保存起来
        this.setData({
          videoCurrentId: id
        })
      }
      // 首次创建视频实例并让其播放，最后将实例存到全局
    } else {
      this.player = wx.createVideoContext(id)
      this.player.play()
      //将新的id保存起来
      this.setData({
        videoCurrentId: id
      })
    }
    // 创建一个video实例
    // const player = wx.createVideoContext(id)
    // player.play()
    // this.player = player
    // //将新的id保存起来
    // this.setData({
    //   videoCurrentId: id
    // })
  },
  // 添加历史 播放记录
  seekHistoryRecord(id) {
    const videoData = this.data.videoPlayHistoryList.find(item => item.id === id)
    if (videoData) {
      this.player.seek(videoData.currentTime)
    }
  },
  //视频结束，将播放记录删除
  videoEndHandle(event) {
    const id = event.target.id
    const videoPlayHistoryList = this.data.videoPlayHistoryList.filter(item => item.id !== id)
    console.log(videoPlayHistoryList);
    this.setData({
      videoPlayHistoryList
    })
  },
  //下拉刷新的事件
  async refreshHandle() {
    await this.getVideoList()
    //这个定时器没有特别的意义只是为了有一个刷新的过程
    setTimeout(() => {
      this.setData({
        refresherFlag: false
      })
    }, 3000)

  },
  //上拉添加新的列表的事件
  pullToRefreshHandle() {
    const newVideoList = this.data.videoList
    if (newVideoList.length < 30) {
      const videoList = [...this.data.videoList, ...newVideoList]
      this.setData({
        videoList,
        refresherFlag: false,
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    await this.getNavList()
    await this.getVideoList()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  // 系统的转发必须要写这个事件
  // 自己的按钮转发 自定义的时候需要写这个事件
  onShareAppMessage({
    from
  }) {
    //通过判断from来判断是原生分享还是按钮分享
    if (from === 'button') {
      //关于图片的问题，一般分享的图片都由canvas 画布生成而来，有兼容问题存在，或者由后盾生成
      return {
        title: "自己按钮转发",
        imageUrl: "../../static/images/demo.webp",
        path: "/pages/video/index"
      }
    }
  }
})